<template>
	<el-dialog title="添加规格" :visible="true" :before-close="closeDialog">
		<div>
			<el-form style="width:100%;float: left; margin-top:-30px;" :inline="true" ref="formFilter">
				<el-form-item style="float: right;">
					<el-button type="info" @click="create">新增</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div class="editContent">
			<div class="left_content">
				<el-tree :data="tree" node-key="id" @check-change="handleCheckChange" ref="tree">
				</el-tree>
			</div>
			<div class="right_content">
				<el-table v-loading.body="loading" :data="tableData" border style="width: 100%">
					<el-table-column prop="id" label="规格id">
					</el-table-column>
					<el-table-column prop="specName" label="规格名称">
					</el-table-column>
					<el-table-column prop="parentId" label="上级规格id">
					</el-table-column>
					<el-table-column label="上级规格名称">
						<template slot-scope="scope">
							{{ scope.row.parentName || "一级标签" }}
						</template>
					</el-table-column>
					<el-table-column label="操作" width="170">
						<template slot-scope="scope">
							<el-button :disabled="scope.row.status === '1'?true:false" size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
							<el-button :disabled="scope.row.status === '1'?true:false" size="mini" type="danger" @click="handleDelete(scope.$index, scope.row, tableData)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>
		<vue-footer style="width:100%">
			<el-pagination :current-page.sync="currentPage" :page-size="10" layout="total, prev, pager, next" :total="pageSize">
			</el-pagination>
		</vue-footer>
		<!-- <span slot="footer" class="dialog-footer">
				<el-button @click="closeDialog">取 消</el-button>
		</span> -->
		<edit-spec ref="edit-spec" @editClose="editFinish" :view="showview" v-if="showview ==='create' || showview ==='edit'" />
	</el-dialog>
</template>

<script>
import { queryAllCategory, queryCouponinfo } from "@/services/product";
import { queryspec, query, create, edit, del } from "@/services/spec";
import { getFromData } from "@/services/getFromData";
import { RequestError } from "@/services/errors";
import { mapActions } from "vuex";
import { deepClone } from '@/utilities/object'
import EditSpec from './editSpec'
import Tinymce from "@/components/Tinymce";
var vailMoney = (rule, value, callback) => {
	var MoneyRegex = /^(0|([1-9]\d{0,8}))(\.\d{1,2})?$/;
	if(!MoneyRegex.test(value)) {
		callback(new Error('数字格式不正确,最多可输入两位小数'))
	} else {
		callback();
	}
};
var vailNumber = (rule, value, callback) => {
	var NumberyRegex = /^[0-9]*$/;
	if(!NumberyRegex.test(value)) {
		callback(new Error('格式不正确,只能输入数字'))
	} else {
		callback();
	}
};

export default {
	name: "index-spec",
	components: {
		EditSpec
	},
	data() {
		return {
			showview: "",
			currentPage: 1,
			pageSize: 10,
			formData: {
				mchtId: "",
			},
			loading: false,
			tableData: [],
			Subabled: false,
			tree: [],
			dialogFormVisible: false,
		}
	},
	props: {
		view: {
			type: String,
			default: "create"
		}
	},
	methods: {
		...mapActions(["setUserInfo"]),
		closeDialog() {
			this.$emit("close");
		},
		handleCheckChange(data, checked, indeterminate) {
			// 树形控件
			// let myarr =this.$refs.tree.getCheckedNodes()
			// this.formData.specList = myarr;
		},
		editFinish(needRefresh) {
			this.showview = ""
			if(needRefresh) {
				this.queryTree(this.formData.mchtId);
				this.loadData(this.currentPage, this.formData.mchtId);
			}
		},
		async create() {
			this.showview = 'create'
			await this.$nextTick()
			this.$refs['edit-spec'].loadSelect(this.formData.mchtId)
			this.$refs['edit-spec'].formData.mchtId = this.formData.mchtId;
		},
		async handleEdit(index, data) {
			// debugger
			this.showview = 'edit'
			await this.$nextTick()
			this.$refs['edit-spec'].dialogFormVisible = true
			this.$refs['edit-spec'].loadSelect(this.formData.mchtId);
			this.$refs['edit-spec'].formData = deepClone(data)
			this.$refs['edit-spec'].id = data.id
			this.$refs['edit-spec'].mchtId = this.formData.mchtId
		},
		async queryTree(mchtId) {
			let data = await queryspec(mchtId);
			this.tree = data.specList;
		},
		async loadData(page, mchtId) {
			this.loading = true
			try {
				let data = await query(Object.assign({
					currentPage: page
				}, {
					perPage: 10
				}, {
					mchtId: mchtId
				}))
				// debugger
				this.tableData = data.specList
				this.pageSize = parseInt(data.totalResult)
			} catch(e) {
				if(e instanceof RequestError) {
					this.$alert(e.message, '提示', {
						type: 'error',
						confirmButtonText: '确定'
					})
				} else {
					throw e
				}
			}
			this.loading = false
		},
		handleDelete(index, data, rows) {
			this.$confirm(`此操作将删除${data.specName}, 是否继续?`, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(async() => {
				try {
					await del({
						id: data.id,
						mchtId: this.formData.mchtId
					})
					this.$message({
						type: 'success',
						message: '已删除'
					})
					rows.splice(index, 1)
					this.queryTree(this.formData.mchtId);
					this.loadData(this.currentPage, this.formData.mchtId);
				} catch(e) {
					if(e instanceof RequestError) {
						this.$alert(e.message, '提示', {
							type: 'error',
							confirmButtonText: '确定'
						})
					} else {
						throw e
					}
				}
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				})
			})
		},
		butTimeOut() {
			var serf = this;
			setTimeout(function() {
				serf.Subabled = false;
			}, 1200)
		}
	},
	mounted() {},
	watch: {
		currentPage(newVal) {
			// console.log(newVal)
			this.loadData(newVal, this.formData.mchtId);
		}
	}
};
</script>
<style>
.diafrom {
	width: 100%;
	float: left;
}

.el-dialog {
	/* z-index: 99; */
	width: 800px;
}

.editContent {
	width: 100%;
	overflow: hidden;
}

.left_content {
	width: 20%;
	float: left;
}

.editContent .right_content {
	width: 78%;
	float: left;
}

.el-select {
	width: 100%;
}
</style>